<template>
  <div>
    <el-row class="back-head" type="flex" align="middle">
      <span @click="backPath()" style="cursor: pointer"><i class="el-icon-arrow-left"></i>返回</span>
      <span class="primary">创建跑腿新用户首单立减</span>
    </el-row>
    <div class="main">
      <el-form :model="params" ref="ruleForm" label-width="120px" label-position="right" size="small">
        <el-row class="head" type="flex" align="middle">活动信息</el-row>
        <div class="item">
          <el-form-item v-if="$store.state.showAgent" label="所属区域" prop="agentid" :rules="[{ required: true, message: '请选择区域', trigger: 'blur' }]">
            <el-select v-model="params.agentid" filterable default-first-option placeholder="--区域--">
              <el-option v-for="item in restaurants" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="活动名称" prop="name" :rules="[{ required: true, message: '请输入活动名称', trigger: 'blur' }]">
            <el-input v-model="params.name" placeholder="输入活动名称" />
          </el-form-item>
          <el-form-item label="优惠" required style="margin-bottom: 0">
            <el-row type="flex">
              <el-form-item prop="lesss" :rules="[{required: true, message: '请输入金额' }]">
                <el-input-number style="width: 160px;margin:0 5px;" :min='0.01' :max='999' :precision='2' v-model="params.lesss" />
              </el-form-item>
              <span>{{comConfig.unit}}</span>
            </el-row>
          </el-form-item>
        </div>
        <el-row class="head" type="flex" align="middle">活动时间</el-row>
        <div class="item">
          <el-form-item label="起止日期" prop="startTimeToendTime" :rules="[{ required: true, message: '请起止日期', trigger: 'blur' }]">
            <pt-date-picker style="width:500px;" v-model="params.startTimeToendTime" :disabledDate ="time => time.getTime() <= (Date.now() - 3600 * 1000 * 24)" />
          </el-form-item>
        </div>
        <el-row>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" :loading="issubmitLoading">保存</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        issubmitLoading: false, //提交表单等待
        params: {
          agentid: '',  //区域id
          ptype: '9',  //活动类型
          name: '', //活动名称
          lesss: '', //减少
          startTimeToendTime: '', //截止日期
          shared: true //不同享
        }
      }
    },
    computed: {
      restaurants() { // 区域数据
        return this.$store.state.agentList
      }
    },
    watch: {
      restaurants: {
        handler(val, oldVal) {
          if (val && val.length) {
            this.params.agentid = val[0].id
          }
        },
        deep: true
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const params = { ...this.params }
            params.startTimeToendTime = params.startTimeToendTime ? params.startTimeToendTime.join(',') : ''
            this.issubmitLoading = true
            this.$http.post('/server/paotui/activity/save', JSON.stringify(params)).then(res => {
              if (res.data.success) {
                this.$message({type: 'success', message: '添加新用户立减成功'})
                this.$router.push({path: '/main/fwactivity/set'})
              }
            }).finally(() => { this.issubmitLoading = false })
          }
        })
      },
      backPath() {
        this.$router.replace({path: '/main/fwactivity/set'})
      }
    },
    mounted() {
      if (this.restaurants && this.restaurants.length) {
        this.params.agentid = this.restaurants[0].id
      }
    }
  }
</script>
<style lang="scss" scoped>
  .primary {
    color: $c-active-newuser;
  }

  .main .head {
    background: $c-active-newuser;
  }

  @import './css/actives.scss';
</style>
